<template>
  <div id="packageChooseDetial">
    <el-row>
      <el-col :span="4">
        <div class="div_border_title">
          <h2>服务项选择</h2>
        </div>
      </el-col>
    </el-row>
    <div class="serviceform">
      <el-form :model="userInfoData" :rules="userInfoRules" ref="userInfoData" label-width="115px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="套餐名字：" prop="package_name">
              <el-input v-model="userInfoData.package_name" style="width: 100%;" placeholder="(1-30字)"></el-input>
            </el-form-item>
            <el-form-item label="是否发布：" prop="is_publish">
              <el-radio-group size="small" style="width: 100%;" v-model="userInfoData.is_publish">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="套餐热度：" prop="package_heat">
              <el-input-number v-model="userInfoData.package_heat" :controls="false"
                               style="width: 100%;"></el-input-number>
            </el-form-item>
            <el-form-item label="用户类型：" prop="user_group" v-if="usertype">
              <el-select v-model="userInfoData.user_group" style="width:100%" @change="getAllServiceList">
                <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="备注：" prop="memo">
              <el-input type="textarea" :rows="3" resize="none" style="width: 100%;" v-model="userInfoData.memo"
                        placeholder="(1-120字)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div>
          <span class="span_adjust">套餐总价:</span>
          <span class="span_color">￥{{userInfoData.money}}元</span>
        </div>
      </el-form>
    </div>
    <div class="serviceshow">
      <div class="toolbar-box" v-if="isButton === true">
        <el-button-group>
          <el-button type="primary" @click="reselectService()">重新选择</el-button>
        </el-button-group>
      </div>
      <el-table :data="serviceList" border highlight-current-row fit @selection-change="handleSelectionChange">
        <el-table-column type="selection" v-if="isButton === false"></el-table-column>
        <el-table-column type="index" :label="$t('index')" align="center"></el-table-column>
        <el-table-column prop="service_type_title" label="服务类型名称" align="center"></el-table-column>
        <el-table-column prop="service_item_description" label="服务项描述" align="center"></el-table-column>
        <el-table-column prop="billing_items_title" label="计费项名称" align="center"></el-table-column>
        <el-table-column prop="user_group" label="计费项用户类型" :formatter="formatterendStatus"
                         align="center"></el-table-column>
        <el-table-column prop="original_price" label="原价" align="center"></el-table-column>
        <el-table-column prop="current_price" label="现价" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="btn-box">
      <el-button type="success" @click="checkUserInfoData('userInfoData')">生成套餐</el-button>
      <el-button type="info" @click="showService('userInfoData')">预览</el-button>
      <el-button type="warning" @click="cancelInfoEdit">返回</el-button>
    </div>
    <el-dialog title="预览套餐" v-model="isDialog">
      <div class="dialog-content">
        <PackageManagementDialog :getServiceData="getServiceData" @returnBack="getIndex"></PackageManagementDialog>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { postDataToServer } from '../../assets/js/post.js'
  import PackageManagementDialog from '@/components/packageManagement/PackageManagementDialog'

  export default {
    name: 'packageChooseDetial',
    data () {
      var checkFrequency = (rule, value, callback) => {
        if (this.userInfoData.user_group === '') {
          callback(new Error('用户类型不能为空'))
        }
        callback()
      }
      return {
        type: '',
        id: '',
        typetitle: '',
        usertype: true,
        serviceKey: '',
        type: '',
        serviceList: [],
        isDialog: false,
        isButton: false,
        service_map: null,
        userInfoData: {
          user_group: '',
          package_name: '',
          package_heat: '',
          is_publish: 0,
          memo: '',
          money: 0,
          data_list: [],
        },
        options: [{
          value: 0,
          label: '个人用户'
        }, {
          value: 1,
          label: '企业用户'
        }, {
          value: 2,
          label: '个人和企业'
        }],
        getServiceData: {
          data_list: [],
          package_name: '',
          package_heat: '',
          is_publish: 0,
          money: 0,
          memo: '',
        },
        selectServerList: [],
        userInfoRules: {
          package_name: [
            {required: true, min: 1, max: 60, message: '长度在 1 到 30 个字', trigger: 'blur'}
          ],
          user_group: [
            {
              required: true, validator: checkFrequency, trigger: 'blur'
            }
          ],
          package_heat: [
            {type: 'integer', message: '请输入热度', trigger: 'blur', required: true,}
          ],
          memo: [
            {min: 0, max: 120, message: '长度在 1 到 120 个字', trigger: 'blur', required: true,}
          ]
        },

      }
    },
    created () {
      this.getBaseInfo()
    },
    methods: {
      handleSelectionChange (val) {
        var all_price = 0
        this.selectServerList = val
        this.selectServerList.forEach((e) => {
          all_price = all_price + e.current_price
        })
        this.userInfoData.money = all_price
      },
      showService (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.selectServerList === []) {
              this.$message({
                message: '请选择服务项！',
                type: 'error'
              })
            } else {
              this.getServiceData = this.userInfoData
              this.getServiceData.data_list = this.selectServerList
              this.isDialog = true
            }
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })
          }
        })
      },
      getBaseInfo () {
        this.id = this.$route.params.id
        if (this.id === 'newdata') {
          this.type = 'add'
          this.serviceKey = 'PACKAGE_ADD'
        } else {
          this.type = 'edit'
          this.isButton = true
          this.usertype = false
          this.getSelectServiceList()
          this.getInfo()
          this.serviceKey = 'PACKAGE_DETAIL_EDIT'
        }
      },
      getIndex (state) {
        if (state === true) {
          this.isDialog = false
          this.checkUserInfoData('userInfoData')
        } else {
          this.isDialog = false
        }
      },
      // 重新选择套餐
      reselectService () {
        this.isButton = false
        this.getAllServiceList(this.typetitle)
        this.delSelectServiceList()
      },
      delSelectServiceList () {
        let _this = this
        let params = new Object()
        params.package_id = this.id
        postDataToServer('PACKAGE_DETAIL_DELBY_PACKAGEID', params).then(function (data) {
          // if(data.status === 1){

          // }
          // else{
          // 	_this.$message({
          // 				// message:data.message,
          // 				message:'提示',
          // 				type: 'warning'
          // 	});
          // }
        })
      },
      //已选中服务项列表
      getSelectServiceList () {
        let _this = this
        let params = new Object()
        params.id = this.id
        postDataToServer('PACKAGE_DETAIL_GETBY_PACKAGEID', params).then(function (data) {
          if (data.status === 0) {
            _this.serviceList = data.data_list
            // console.log(_this.serviceList);
            if (_this.serviceList.length <= 0) {
              _this.typetitle = ''
            } else if (_this.serviceList[0].user_group === 1) {
              _this.typetitle = 1
            } else if (_this.serviceList[0].user_group === 2) {
              _this.typetitle = 2
            } else if (_this.serviceList[0].user_group === 0) {
              _this.typetitle = 0
            }
          } else {
            _this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      //获取编辑信息
      getInfo () {
        let _this = this
        let params = new Object()
        params.id = this.id
        let s = []
        postDataToServer('PACKAGE_GET', params).then(function (data) {
          if (data.status === 0) {
            _this.userInfoData = data.data_list
          } else {
            _this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      getAllServiceList (val) {
        console.log(val)
        let _this = this
        let params = new Object()
        if (val === '') {
          params.user_group = undefined
        } else {
          params.user_group = val
        }
        postDataToServer('STALLS_SERVICE_ITEM_LIST', params).then((data) => {
          if (data.status === 0) {
            _this.serviceList = data.data_list
          }
          // else{
          // 	_this.$message({
          //       				// message:data.message,
          //       				message:'提示消息',
          //       				type: 'warning'
          //     			});
          // }
        })
      },
      addOredit () {
        if (this.type === 'add') {
          this.addServiceInfoData()
        } else {
          this.editServiceInfoData()
        }
      },
      checkUserInfoData (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addOredit()
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })

          }
        })
      },
      addServiceInfoData () {
        let _this = this
        if (_this.selectServerList.length === 0) {
          _this.$message({
            message: '请选择服务项！',
            type: 'warning'
          })
          return
        }
        let params = new Object()
        params.package_name = _this.userInfoData.package_name
        params.user_group = _this.userInfoData.user_group
        params.package_heat = _this.userInfoData.package_heat
        params.memo = _this.userInfoData.memo
        params.money = this.userInfoData.money
        postDataToServer('PACKAGE_ADD', params).then((data) => {
          if (data.status === 26) {
            var packageid = data.message
            _this.selectServerList.forEach((e) => {
              _this.addServiceList(packageid, e.id)
            })
            _this.$router.push({'path': '/dashIndex/packagemanagementlist'})
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })

      },
      addServiceList (packageId, serviceId) {
        let _this = this
        let params = new Object()
        params.package_id = packageId
        params.service_item_id = serviceId
        postDataToServer('PACKAGE_DETAIL_ADD', params).then((data) => {
          if (data.status === 0) {

          } else {
            _this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      editServiceInfoData () {
        let _this = this
        let params = new Object()
        params.is_publish = this.userInfoData.is_publish
        params.memo = this.userInfoData.memo
        params.package_heat = this.userInfoData.package_heat
        params.package_name = this.userInfoData.package_name
        params.money = this.userInfoData.money
        params.id = this.id
        if (this.selectServerList === []) {
          this.message.warning('请选择服务项！')
          return
        }
        postDataToServer('PACKAGE_EDIT', params).then((data) => {
          if (data.status === 0) {
            _this.selectServerList.forEach((e) => {
              _this.addServiceList(this.id, e.id)
            })
            _this.$router.push({'path': '/dashIndex/packagemanagementlist'})
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })

      },
      formatterendStatus (row) {
        return getStaticMapList('user_group', row.user_group)
      },
      //取消
      cancelInfoEdit () {
        this.$router.push({'path': '/dashIndex/packagemanagementlist'})
      },
    },
    components: {
      PackageManagementDialog
    },
    watch: {}
  }
</script>
<style scoped>
  #packageChooseDetial {
    padding: 2em;
  }

  .serviceform {
    margin-top: 1em;
  }

  .serviceshow {
    padding: 1em;
  }

  .btn-box {
    margin-top: 1em;
    text-align: center;
  }

  .span_adjust {
    line-height: 28px;
  }

  .span_color {
    color: #FF4949;
    font-size: 25px;
    font-family: 微软雅黑;
  }
</style>
